$(".small").eq(0).css({
	width: "98px",
	height: "98px"
});
$(".small").eq(1).css({
	width: "98px",
	height: "98px"
});
$("#photo").mouseover(
	function() {
		$(".mask").css({
			display: "block"
		})
		$("#jingzi").css({
			display: "block"
		})

	}
)

$("#photo").mouseout(
	function() {
		$(".mask").css({
				display: "none"
			}),
			$("#jingzi").css({
				display: "none"
			});
	}
)

$("#photo").mousemove(
	function(e) {
		// 获取遮罩中心点
		let left = e.pageX - document.getElementById('photo').getBoundingClientRect().left - document.querySelector(".mask").offsetWidth/2 ;
		let top = e.pageY - document.getElementById('photo').getBoundingClientRect().top -document.querySelector(".mask").offsetHeight/2 ;
		// console.log(left)
		if (left < 0) {
			left = 0;
		}
		let maxLeft =document.getElementById('photo').offsetWidth - document.querySelector(".mask").offsetWidth;
		if (left > maxLeft) {
			left = maxLeft;
		}

		if (top < 0) {
			top = 0;
		}
		let maxTop = document.getElementById('photo').offsetHeight - document.querySelector(".mask").offsetHeight
		if (top > maxTop) {
			top = maxTop;
		}
		// that.oMask.style.left = left + "px"
		$(".mask").css("left", left + 'px')
		$(".mask").css("top", top + 'px')
		let x = document.getElementById('jingzi').offsetWidth * left / document.querySelector(".mask").offsetWidth;
		let y = document.getElementById('jingzi').offsetHeight * top /document.querySelector(".mask").offsetHeight;
		$("#jingzi").css("backgroundPositionX",-x+'px')

		
		$("#jingzi").css("backgroundPositionY",-y + 'px');
			


S
	}
)
$("#image>ul>li").eq(0).css({
	backgroundSize: "62px 62px",
	backgroundImage: "url(img/31.jpg)",
})
$("#image>ul>li").eq(0).click(
	function() {
		$("#image>ul>li").css({
			border:"1px solid black"
		})
		$("#jingzi").css({
			backgroundImage: "url(img/31.jpg)"
		})
		$("#photo").css({
			backgroundImage: "url(img/31.jpg)"
		})
	}
)
$("#image>ul>li").eq(1).css({
	backgroundSize: "62px 62px",
	backgroundImage: "url(img/32.jpg)",
	
})
$("#image>ul>li").eq(1).click(
	function() {
		$("#image>ul>li").css({
			border:"1px solid black"
		})
		$("#jingzi").css({
			backgroundImage: "url(img/32.jpg)"
		})
		$("#photo").css({
			backgroundImage: "url(img/32.jpg)"
		})
	}
)
let t=0;
$(".show").click(
function(){
	if(t==0){
	$("#hidden").css({display:"block"
	})
	t==1}else{
		$("#hidden").css({display:"none"
		})
		t==0
	}
	// $("#infor").css({height:"1250px"})
}
)




// $(".show").click(


// 	// $("#infor").css({height:"1250px"})
// }
// )

// oLiOver() {
//         let that = this;
//         let oLis = document.querySelectorAll("li");
//         for (let i = 0; i < oLis.length; i++) {
//             oLis[i].style.backgroundImage = `url(img/33${i}.jpg)`;
//             oLis[i].onmouseover = function () {
//                 that.oSmallBox.style.backgroundImage = `url(img/33${i}.jpg)`;
//                 that.oBigBox.style.backgroundImage = `url(img/33${i}.jpg)`;
//             }
//         }
//     }
// class MF {
//     //构造方法中参数设计的思想:
//     //凡是类中需要使用的HTML元素,全部设计为参数
//     constructor(smallBox, mask, bigBox) {
//         this.oSmallBox = smallBox;
//         this.oMask = mask;
//         this.oBigBox = bigBox;
//         this.eventBind();
//     }
//     onmouseover() {
//         let that = this;
//         this.oSmallBox.onmouseover = function () {
//             that.oMask.style.display = "block";
//             that.oBigBox.style.display = "block";
//         }
//     }
//     onmouseout() {
//         let that = this;
//         this.oSmallBox.onmouseout = function () {
//             that.oMask.style.display = "none";
//             that.oBigBox.style.display = "none";
//         }
//     }
//     onmousemove() {
//         let that = this;
//         this.oSmallBox.onmousemove = function (evt) {
//             let e = evt || event;

//             let left = e.pageX - this.offsetLeft - that.oMask.offsetWidth / 2;
//             let top = e.pageY - this.offsetTop - that.oMask.offsetHeight / 2;


//             if (left < 0) {
//                 left = 0;
//             }
//             let maxLeft = that.oSmallBox.offsetWidth - that.oMask.offsetWidth;
//             if (left > maxLeft) {
//                 left = maxLeft;
//             }

//             if (top < 0) {
//                 top = 0;
//             }
//             let maxTop = that.oSmallBox.offsetHeight - that.oMask.offsetHeight
//             if (top > maxTop) {
//                 top = maxTop;
//             }

//             that.oMask.style.left = left + "px"
//             that.oMask.style.top = top + "px"
//             let x = that.oBigBox.offsetWidth * left / that.oMask.offsetWidth;
//             let y = that.oBigBox.offsetHeight * top / that.oMask.offsetHeight;


//             that.oBigBox.style.backgroundPositionX = -x + "px";
//             that.oBigBox.style.backgroundPositionY = -y + "px";
//             //  小图片      小窗口
//             // -------  =  -------
//             //  大图片      大窗口
//         }
//     }
//     oLiOver() {
//         let that = this;
//         let oLis = document.querySelectorAll("li");
//         for (let i = 0; i < oLis.length; i++) {
//             oLis[i].style.backgroundImage = `url(img/33${i}.jpg)`;
//             oLis[i].onmouseover = function () {
//                 that.oSmallBox.style.backgroundImage = `url(img/33${i}.jpg)`;
//                 that.oBigBox.style.backgroundImage = `url(img/33${i}.jpg)`;
//             }
//         }
//     }
//     eventBind() {
//         this.onmouseover();
//         this.onmouseout();
//         this.onmousemove();
//         this.oLiOver();
//     }
// }
